<template>
  <div class="tab">
    <block v-for="(item, index) in list" :key="index">
      <div class="divs" :class="{ active: active === index }" @click="onTabClick(index)">
        <div class="postions">
          <image :src="item.posImg" class="pos"></image>
          <image :src="item.img" class="iont"></image>
        </div>
        <span>{{ item.name }}</span>
      </div>
    </block>
  </div>
</template>

<script>
  export default {
    name: 'Tab',
    data() {
      return {
        active: 0, //当前第几项
        //tab数据
        list: [
          {
            name: '我要提问',
            posImg: '../../static/my-cell/a2.png',
            img: '../../static/my-cell/a1.png',
          },
          {
            status:6,
            name: '大家在问',
            posImg: '../../static/my-cell/b2.png',
            img: '../../static/my-cell/b1.png',
          },
          {
            status:5,
            name: '大家在提',
            posImg: '../../static/my-cell/c2.png',
            img: '../../static/my-cell/c1.png',
          },
          {
            status:4,
            name: '政策查询',
            posImg: '../../static/my-cell/d2.png',
            img: '../../static/my-cell/d1.png',
          },
        ],
      }
    },
    methods: {
      //切换对应的tab
      onTabClick(index) {
        this.active = index
        this.$emit('click', this.active)
      },
    },
  }
</script>

<style scoped lang="scss">
  .tab {
    display: $flex;
    justify-content: $space-between;
    padding: 34rpx 53rpx;
    .divs {
      text-align: center;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      &.active {
        span {
          color: $colorc006be8;
        }
      }
      .postions {
        width: 105rpx;
        height: 105rpx;
        position: $relative;
        .pos {
          width: $width100;
          height: $height100;
        }
        .iont {
          position: $absolute;
          top: $top50;
          left: $left50;
          transform: $transform50;
          width: 42rpx;
          height: 42rpx;
        }
      }
      span {
        width: 111rpx;
        height: 26rpx;
        font-size: $f28;
        font-family: $font-familyPingFang;
        font-weight: $font-weight500;
        color: $color2222;
        padding-top: 7rpx;
        white-space: $nowrap;
      }
    }
  }
</style>
